<template>
  <view class="container">
    <!-- 顶部宣传区域 -->
    <view class="top-banner">
      <text class="logo">厨娘</text>
      <text class="slogan">厨娘菜人人爱 自己种放心吃</text>
      <text class="sub-slogan">10年老店·品质如一</text>
    </view>
    <!-- 用户信息区域 -->
    <view class="user-info">
      <image class="avatar" :src="avatarUrl"></image>
      <view class="user-details">
        <text class="username">微笑婷</text>
        <text class="role">小厨</text>
        <view class="stats">
          <text>优惠券: {{coupons}}</text>
          <text>余额: {{balance}}</text>
          <text>积分: {{points}}</text>
        </view>
      </view>
      <button class="member-code">会员码</button>
    </view>
    <!-- 券、余额、积分统计区域 -->
    <view class="stats-section">
      <view class="stat-item">
        <image class="icon" src="@/static/coupon-icon.png"></image>
        <text>券</text>
        <text>{{coupons}}</text>
      </view>
      <view class="stat-item">
        <image class="icon" src="@/static/balance-icon.png"></image>
        <text>余额</text>
        <text>{{balance}}</text>
      </view>
      <view class="stat-item">
        <image class="icon" src="@/static/point-icon.png"></image>
        <text>积分</text>
        <text>{{points}}</text>
      </view>
    </view>
    <!-- 高级美食分享官区域 -->
    <view class="share-officer-section">
      <text class="section-title">高级美食分享官</text>
      <text class="price-tag">¥99即可升级</text>
      <text class="benefits-title">立即可得6项权益</text>
      <view class="benefits-list">
        <view class="benefit-item">
          <text>立即可得100元菜金券x1</text>
        </view>
        <view class="benefit-item">
          <text>立即可得50元菜金券x2</text>
        </view>
        <view class="benefit-item">
          <text>100元券包 新友任意送</text>
        </view>
        <view class="benefit-item">
          <text>好友成功领券消费可获返利5%</text>
        </view>
        <view class="benefit-item">
          <text>每月赠送50元菜金券</text>
        </view>
        <view class="benefit-item">
          <text>好友加入美食分享官可获关联消费返利2%</text>
        </view>
      </view>
      <button class="join-button">立即加入</button>
    </view>
    <!-- 白酒促销区域 -->
    <view class="wine-promotion-section">
      <text class="section-title">厨娘 大宗0利润白酒 十年庆 感恩回馈</text>
      <image class="medal" src="@/static/medal.png"></image>
      <view class="wine-list">
        <image class="wine-item" src="@/static/wine1.png"></image>
        <image class="wine-item" src="@/static/wine2.png"></image>
        <image class="wine-item" src="@/static/wine3.png"></image>
      </view>
      <button class="purchase-button">立即选购</button>
    </view>
    <!-- 甄选商城区域 -->
    <view class="mall-section">
      <text class="section-title">甄选商城</text>
      <text class="mall-desc">积分换好礼·甄选商品·会员特权价</text>
      <button class="exchange-button">立即兑换</button>
    </view>
    <!-- 福利来袭区域 -->
    <view class="welfare-section">
      <text class="section-title">福利来袭</text>
      <text class="welfare-english">WELFARE IS COMING</text>
      <image class="phone-icon" src="@/static/phone-icon.png"></image>
      <text class="welfare-desc">*点击进群蹲福利</text>
    </view>
    <!-- 会员升级区域 -->
    <view class="member-upgrade-section">
      <text class="section-title">会员升级</text>
      <button class="view-privilege">查看升级后会员特权 ></button>
      <view class="progress-bar">
        <view class="progress" :style="{width: progressWidth + '%'}"></view>
      </view>
      <text class="upgrade-info">当前累计充值0元还差1000元即可升级</text>
      <button class="upgrade-strategy">升级攻略</button>
    </view>
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item">
        <image class="tab-icon" src="@/static/home-icon.png"></image>
        <text>首页</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="@/static/group-icon.png"></image>
        <text>厨娘群</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="@/static/payment-icon.png"></image>
        <text>支付码</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="@/static/scan-icon.png"></image>
        <text>扫码点餐</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="@/static/my-icon.png"></image>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      avatarUrl: 'https://example.com/avatar.jpg', // 替换为真实头像地址
	      coupons: 0,
	      balance: 0,
	      points: 0,
	      progressWidth: 0 // 可根据实际充值情况计算百分比更新
	    };
	  },
	  methods: {
	    // 可在此添加按钮点击等交互逻辑
	  }
	};
</script>

<style lang="scss" scoped>
/* 整体容器 */
.container {
  background-color: #fff;
  padding: 10px;
}
/* 顶部宣传区域 */
.top-banner {
  background-color: #e66900;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}
.logo {
  font-size: 30px;
}
.slogan {
  font-size: 40px;
}
.sub-slogan {
  font-size: 16px;
}
/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}
.user-details {
  flex: 1;
}
.username {
  font-size: 18px;
}
.role {
  font-size: 14px;
  color: #999;
}
.stats {
  display: flex;
  margin-top: 5px;
}
.stats text {
  margin-right: 10px;
}
.member-code {
  background-color: #e6b84c;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
}
/* 券、余额、积分统计区域 */
.stats-section {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.stat-item {
  text-align: center;
}
.icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
/* 高级美食分享官区域 */
.share-officer-section {
  background-color: #e66900;
  color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.section-title {
  font-size: 30px;
  margin-bottom: 10px;
}
.price-tag {
  font-size: 16px;
  border: 1px solid #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
.benefits-title {
  font-size: 24px;
  margin-top: 10px;
}
.benefits-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
}
.benefit-item {
  flex: 0 0 48%;
  margin-bottom: 10px;
}
.join-button {
  background-color: #e6b84c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  margin-top: 10px;
}
/* 白酒促销区域 */
.wine-promotion-section {
  background-color: #e66900;
  color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.medal {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
.wine-list {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.wine-item {
  width: 60px;
  height: 100px;
}
.purchase-button {
  background-color: #e6b84c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
}
/* 甄选商城区域 */
.mall-section {
  background-color: #f7a446;
  color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.mall-desc {
  font-size: 14px;
  margin-top: 5px;
}
.exchange-button {
  background-color: #e6b84c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  margin-top: 10px;
}
/* 福利来袭区域 */
.welfare-section {
  background-color: #f7a446;
  color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.welfare-english {
  font-size: 16px;
  margin-top: 5px;
}
.phone-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}
.welfare-desc {
  font-size: 14px;
}
/* 会员升级区域 */
.member-upgrade-section {
  background-color: #f9f2e7;
  padding: 10px;
  text-align: center;
}
.view-privilege {
  float: right;
  color: #999;
  background-color: transparent;
  border: none;
}
.progress-bar {
  height: 10px;
  background-color: #e6e6e6;
  border-radius: 5px;
  margin: 10px 0;
}
.progress {
  height: 100%;
  background-color: #e6b84c;
  border-radius: 5px;
}
.upgrade-info {
  font-size: 14px;
  margin-bottom: 10px;
}
.upgrade-strategy {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
}
/* 底部导航栏 */
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #f9f2e7;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.tab-item {
  text-align: center;
}
.tab-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
</style>